<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Joseph的登陆界面</title>

    <link rel="stylesheet" href="./css/reset.css" />
    <!-- 引入重置样式表 -->
    <link rel="stylesheet" href="./fa/css/all.min.css" />
    <!-- 引入图标字体库 -->
    <link rel="stylesheet" href="./css/index.css" />
    <!-- 引入整个页面的样式 -->
    <style></style>
  </head>
  <body>
    <!-- 装两个页面的大盒子 -->
    <div class="containBox">
      <!-- 装登陆界面的盒子 -->
      <div class="container1">
        <!-- 登陆界面中的logo和搜索框 -->
        <div class="logoiptBox1">
          <div class="logo">
            <i class="fas fa-yin-yang"></i>
            <span class="span1">Sign In</span>
            <span class="span2">Sign In</span>
          </div>
          <div class="inputBox">
            <form action="">
              <li>
                <i class="fas fa-user-tie"></i>
                &nbsp
                <input
                  type="text"
                  placeholder="请输入账号"
                  class="input_name"
                  id="lg_username"
                />
                <button type="button" class="Rset">
                  <i class="fas fa-sync-alt"></i>
                </button>
              </li>

              <li>
                <i class="fas fa-keyboard"></i>
                <input
                  type="password"
                  placeholder="请输入密码"
                  class="input_password"
                  id="lg_password"
                />
                <button type="button" class="Rset">
                  <i class="fas fa-sync-alt"></i>
                </button>
              </li>
            </form>
          </div>
        </div>

        <!-- 登陆界面的按钮 -->
        <div class="btnBox">
          <button id="SignIn">登陆&nbsp<i class="fas fa-paw"></i></button>
          <button id="toRegister">
            To注册&nbsp<i class="fas fa-feather-alt"></i>
          </button>
        </div>
      </div>
      <!-- 装注册界面的盒子 -->
      <div class="container2">
        <!-- 输入框和LOGO -->
        <div class="logoiptBox2">
          <div class="logo">
            <i class="fas fa-compass"></i>
            <span class="span1">Register</span>
            <span class="span2">Register</span>
          </div>
          <div class="inputBox">
            <form action="">
              <li>
                <i class="fas fa-address-card"></i>
                <input
                  type="text"
                  placeholder="请输入账号"
                  class="input_name"
                  id="re_username"
                  name="emailNumber"
                  autocomplete="off"
                />
                <button type="button" class="Rset">
                  <i class="fas fa-sync-alt"></i>
                </button>
              </li>
              <li>
                <i class="fas fa-edit"></i>
                <input
                  type="password"
                  placeholder="请输入密码"
                  class="input_name"
                  id="re_password"
                />
                <button type="button" class="Rset">
                  <i class="fas fa-sync-alt"></i>
                </button>
              </li>
              <li>
                <i class="fas fa-smile"></i>
                <input
                  type="text"
                  placeholder="请输入名字"
                  class="input_name"
                  id="re_name"
                />
                <button type="button" class="Rset">
                  <i class="fas fa-sync-alt"></i>
                </button>
              </li>
              <li>
                <i class="fas fa-phone-square-alt"></i>
                <input
                  type="text"
                  placeholder="请输入电话号码"
                  class="input_name"
                  id="re_phone"
                  maxlength="11"
                />
                <button type="button" class="Rset">
                  <i class="fas fa-sync-alt"></i>
                </button>
              </li>
            </form>
          </div>
        </div>
        <!-- 注册界面的按钮 -->
        <div class="btnBox">
          <button id="Register">注册 <i class="fas fa-user-check"></i></button>
          <button id="toSign">返回登陆 <i class="fas fa-reply"></i></button>
        </div>
      </div>
    </div>

    <!-- 粒子背景 -->
    <canvas class="background"></canvas>
  </body>
  <footer>
    <!-- 切换登陆注册界面 -->
    <script src="./js/TabBox.js"></script>

    <!-- 背景粒子效果 -->
    <script src="./particles.js-master/dist/particles.min.js"></script>
    <script src="./js/popAnimation.js"></script>

    <!-- 登陆功能 -->
    <script src="./js/SignIn.js"></script>

    <!-- 注册功能 -->
    <script src="./js/Register.js"></script>

    <!-- 实现键盘响应式和输入框重置效果 -->
    <!-- 包含正则表达式来验证电话号码 -->
    <script src="./js/keydownEvent.js"></script>
  </footer>
</html>
